
<template>
  <div id="ticket" :class='{"isiphone":$isiphone}'>
    <div class="top">
      <tab :line-width="1" custom-bar-width="29px" v-model="index" active-color='#EC1B24'>
        <tab-item class="vux-center" :selected="defaultTab === item" v-for="(item, index2) in tabList" @click="defaultTab = item" :key="index2">{{item}}</tab-item>
      </tab>
      <div class="vux-swiper-wrap">
        <div class="vux-swiper ">
          <div class="tab-swiper vux-center">
            <div :class="['one',{'cancel':isUse == 'y'}]" v-for="(item, index) in dataList" :key='index+"x"' @click='JumpItem(item)'>
              <!-- <img :src="item.img" alt=""> -->
              <div class="left">
                <div>电</div>
                <div>子</div>
                <div>券</div>
              </div>
              <div class="detail">
                <p>{{item.couponName}}</p>
                <!-- <div>x{{item.number}}</div> -->
                <div class="date">有效期：{{item.validTime}}</div>
                <!-- <span>
                  待使用
                </span> -->
                <div v-if="isUse == 'y'" class="mark-icon"></div>
                <div v-if="item.type == 'third'&&isUse != 'y'" @click.stop="confrimBtn(item,index)" class="btn">标记使用</div>
              </div>
            </div>
            <load-more :show-loading="false" tip="暂无更多数据" v-show="isloading" background-color="#fbf9fe"></load-more>
          </div>
        </div>
      </div>
    </div>
    <div  @click="scrollTopBtn" class="top-icon">
      <img src="../../../wechat/static/images/top.png" alt="">
    </div>
  </div>
</template>

<script>
import { Tab, TabItem, Swiper, SwiperItem,LoadMore } from "vux";
import { setTimeout } from 'timers';
export default {
  name: "ticket",
  data() {
    return {
      index: this.$route.query.type,
      isloading: false,
      defaultTab: "待使用",
      tabList: ["待使用", "已使用"],
      isUse: 'n',
      serviceStatus:'"notuse"',
      userId: localStorage.getItem('userId')||'' ,//所属用户id
      isloading:false,
      dataList:[]
    };
  },
  mounted() {
    // this.getTList()
  },
  watch:{
    'index':function(val){
      this.isUse = val == 1?'y':'n'
      this.getTList()
    }
  },
  created() {},
  methods: {
    getTList() {
      this.dataList = []
      let url =
        this.$CONSTANT.COUPON.findByMyCoupon +
        "?sessionId=" +
        this.$common.getCookie("sessionId")+'&isUse='+this.isUse;
      let param = {};
      
      this.$vux.loading.show({
        text: 'Loading'
      })
      this.$common.post(url, param, res => {
        this.isloading = true
        this.$vux.loading.hide()
        if (res.status == 200) {
          var bussData = res.data.bussData;
          this.dataList = bussData
        } else {
          this.$vux.toast.show({
              text: res.msg,
              type: "warn",
              width: 'auto'
            });
        }
      });
    },
    onItemClick(index) {
      console.log("on item click:", index);
    },
    JumpItem(item) {
      this.$router.push({path: '/ticketD', query: {id: item.id,type:item.type,orderId:item.orderId,index :this.index,orderDate:item.orderDate}})
    },
    scrollTopBtn(){
      document.body.scrollTop=document.documentElement.scrollTop=0
    },
    confrimBtn(v,index){
      var that = this
      this.$vux.confirm.show({
        title: '提示',
        content: '确认标记该电子券为已使用吗',
        onShow () {
          console.log('plugin show')
        },
        onHide () {
          console.log('plugin hide')
        },
        onCancel () {
          console.log('plugin cancel')
        },
        onConfirm () {
          console.log('plugin confirm')
          let url =
            that.$CONSTANT.COUPON.updateMyCoupon +
            "?sessionId=" +
            that.$common.getCookie("sessionId");
          let param = {
            id: v.id,
            status:'y',
            type:'third'
          };
          that.$vux.loading.show({
            text: 'Loading'
          })
          setTimeout(() => {
            that.$common.post(url, param, res => {
              that.$vux.loading.hide()
              if (res.status == 200) {
                that.$vux.toast.show({
                  text: '使用成功',
                  type: "success",
                  width: 'auto'
                });
                that.index = 1
                that.getTList()
                setTimeout(()=>{
                  that.scrollTopBtn()
                },100)
              } else {
                that.$vux.toast.show({
                  text: res.msg,
                  type: "warn",
                  width: 'auto'
                });
              }
            });
          }, 1000);
        }
      })
    }
  },
  components: {
    Tab,
    TabItem,
    Swiper,
    SwiperItem,
    LoadMore
  }
};
</script>

<style lang="less">
#ticket {
  height: 100%;
  .top {
    height: 100%;
    .vux-tab-wrap {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 999;
      height: 44px;
      border-bottom: 1px solid #ddd;
      padding-top: 0;
      .vux-tab-container {
        .vux-tab {
          .vux-tab-item {
            font-family: PingFang-SC-Medium;
            color: #999;
            font-size: 15px;
            background: none;
          }
          .vux-tab-selected {
            color: #333 !important;
          }
          .vux-tab-ink-bar {
            height: 2px !important;
          }
        }
      }
    }
    .vux-swiper-wrap {
      height: 100%;
      padding-top: 50px;
      .vux-swiper {
        .tab-swiper {
          // padding-top: 10px;
          padding-bottom: 10px;
          .one {
            background: #fff;
            // margin-top: 8px;
            // padding: 22px 11px;
            margin: 10px auto 0;
            position: relative;
            width: 355px;
            height: 120px;
            background-image: url('../../../wechat/static/images/coupon.png');
            background-size: 100%;
            display: flex;
            &.cancel{
              background-image: url('../../../wechat/static/images/couponUsed.png');
            }
            .left{
              width: 50px;
              height: 120px;
              font-size:17px;
              font-family:PingFang SC;
              font-weight:500;
              color:rgba(255,255,255,1);
              text-align: center;
              div{
                height: 20px;
                &:first-child{
                  margin-top: 26px;
                }
              }
            }
            img {
              position: absolute;
              top: 22px;
              left: 11px;
              width: 26.6%;
              height: 94px;
              border: 1px solid transparent;
              border-radius: 3px;
              margin-right: 15px;
              object-fit: contain;
              display: inline-block;
            }
            .detail {
              display: inline-block;
              width: 275px;
              margin: 0 auto;
              vertical-align: top;
              position: relative;
              height: 120px;
              .mark-icon{
                position: absolute;
                right: 0;
                top: 20px;
                width: 37px;
                height: 37px;
                background-image: url('../../../wechat/static/images/mark.png');
                background-size: 100%;
              }
              p {
                color: #333;
                font-size: 13px;
                font-family: PingFang-SC-Medium;
                margin-top: 20px;
                height: 30px;
              }
              div{
                color: #999;
                margin: 12px 0 20px;
                font-size: 12px;
                font-family: PingFang-SC-Medium;
              }
              .btn{
                position: absolute;
                right: 0;
                bottom: 0;
                width:78px;
                height:30px;
                background:rgba(238,60,74,1);
                border-radius:15px;
                text-align: center;
                line-height: 30px;
                font-size:13px;
                font-family:PingFang SC;
                font-weight:500;
                color:rgba(255,255,255,1);
              }
              .date{
                font-size:12px;
                font-family:PingFang SC;
                font-weight:500;
                color:rgba(170,170,170,1);
                margin-top: 25px;
              }
              span {
                margin-top: 41px;
                color: #ea030b;
          font-size: 14px;
                font-family: PingFang-SC-Bold;font-weight: 600;
                position: absolute;
                bottom: 0;
                left: 0;
                &:last-child{
                  right: 0;
          font-size: 12px;
                  left: auto;
                  color: #EC1B24;
                }
              }
            }
          }
          .surplus{
            .item{
              .left{
                p{
                  span{
                    color: #B5B5B5;
                  }
                  &:last-child {
                    color: #B5B5B5;
                  }
                }
                .range {
                  color: #FFFFFF;
                  background: #DBDBDB;
                }
              }
              .right{
                span{
                  color: #B5B5B5;
                }
              }
            }
          }
          a{
            margin-top: 170px;
            margin-left: 73px;
            margin-bottom: 41px;
            text-align: center;
            display: inline-block;
            width: 229px;
            height: 45px;
            line-height: 45px;
            border: 1px solid transparent;
            border-radius: 23px;
            background-color: #f02931;
            font-family: PingFang-SC-Bold;font-weight: 600;
            font-size: 15px;
            color: #fff;
            text-align: center;
            &:hover {
              background-color: #e1252c;
            }
          }
        }
      }
    }
  }
}
</style>
